<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }
        
        /* 按钮样式 */
        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        
        .btn-info {
            background-color: #17a2b8;
            color: white;
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .form-col {
            flex: 1;
            min-width: 200px;
        }
        
        /* 搜索容器 */
        .search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        /* 用户卡片样式 */
        .user-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .user-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease-in-out;
        }
        
        .user-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .user-info {
            margin-bottom: 10px;
        }
        
        .user-info p {
            margin: 5px 0;
            color: #666;
        }
        
        .user-info strong {
            color: #333;
        }
        
        .user-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .user-actions button {
            padding: 5px 10px;
            font-size: 12px;
        }
        
        /* 性别徽章 */
        .gender-badge {
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.85rem;
            display: inline-block;
            margin-right: 10px;
        }
        
        .male-badge {
            background-color: #e7f3ff;
            color: #0056b3;
        }
        
        .female-badge {
            background-color: #fff0f5;
            color: #c2185b;
        }
        
        /* 警告消息样式 */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            display: none;
            text-align: center;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            min-width: 300px;
            z-index: 1000;
        }
        
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
        
        .alert-info {
            color: #0c5460;
            background-color: #d1ecf1;
            border-color: #bee5eb;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .button-group {
                flex-direction: column;
            }
            
            .button-group button {
                width: 100%;
            }
            
            .search-container {
                flex-direction: column;
            }
            
            .search-container input,
            .search-container button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户管理系统</h1>
        
        <!-- 操作按钮组 -->
        <div class="button-group">
            <button id="btnShowAll" class="btn-primary">显示所有用户</button>
            <button id="btnShowMale" class="btn-info">显示男性用户</button>
            <button id="btnShowFemale" class="btn-info">显示女性用户</button>
            <button id="btnAddUser" class="btn-success">添加用户</button>
        </div>
        
        <!-- 搜索用户 -->
        <div class="card">
            <h3>搜索用户</h3>
            <div class="search-container">
                <input type="number" id="searchId" class="form-control" placeholder="输入用户ID">
                <button id="btnFindById" class="btn-primary">查找</button>
            </div>
        </div>
        
        <!-- 添加用户表单 -->
        <div id="addUserForm" class="card" style="display: none;">
            <h3>添加用户</h3>
            <div class="form-group">
                <input type="text" id="newUserName" class="form-control" placeholder="用户名">
            </div>
            <div class="form-row">
                <div class="form-col">
                    <input type="number" id="newUserAge" class="form-control" placeholder="年龄">
                </div>
                <div class="form-col">
                    <select id="newUserGender" class="form-control">
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </div>
            </div>
            <div class="button-group">
                <button id="btnConfirmAdd" class="btn-success">确认添加</button>
                <button id="btnCancelAdd" class="btn-secondary">取消</button>
            </div>
        </div>
        
        <!-- 更新用户表单 -->
        <div id="updateUserForm" class="card" style="display: none;">
            <h3>更新用户</h3>
            <input type="hidden" id="updateUserId">
            <div class="form-group">
                <input type="text" id="updateUserName" class="form-control" placeholder="用户名">
            </div>
            <div class="form-row">
                <div class="form-col">
                    <input type="number" id="updateUserAge" class="form-control" placeholder="年龄">
                </div>
                <div class="form-col">
                    <select id="updateUserGender" class="form-control">
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </div>
            </div>
            <div class="button-group">
                <button id="btnConfirmUpdate" class="btn-primary">更新</button>
                <button id="btnCancelUpdate" class="btn-secondary">取消</button>
            </div>
        </div>
        
        <!-- 用户列表 -->
        <div class="card">
            <h3>用户列表</h3>
            <div id="userList" class="user-cards">
                <!-- 用户卡片将在这里动态生成 -->
            </div>
        </div>
        
        <!-- 消息提示 -->
        <div id="message" class="alert"></div>
    </div>

    <script>
        // 基础URL - 注意：与application.properties中的server.port保持一致
        const BASE_URL = 'http://localhost:8083';
        
        // DOM元素
        const btnShowAll = document.getElementById('btnShowAll');
        const btnShowMale = document.getElementById('btnShowMale');
        const btnShowFemale = document.getElementById('btnShowFemale');
        const btnFindById = document.getElementById('btnFindById');
        const btnAddUser = document.getElementById('btnAddUser');
        const btnConfirmAdd = document.getElementById('btnConfirmAdd');
        const btnConfirmUpdate = document.getElementById('btnConfirmUpdate');
        const searchId = document.getElementById('searchId');
        const userList = document.getElementById('userList');
        const message = document.getElementById('message');
        const addUserForm = document.getElementById('addUserForm');
        const updateUserForm = document.getElementById('updateUserForm');
        const btnCancelAdd = document.getElementById('btnCancelAdd');
        const btnCancelUpdate = document.getElementById('btnCancelUpdate');
        
        // 事件监听器
        btnShowAll.addEventListener('click', showAllUsers);
        btnShowMale.addEventListener('click', showMaleUsers);
        btnShowFemale.addEventListener('click', showFemaleUsers);
        btnFindById.addEventListener('click', findUserById);
        btnAddUser.addEventListener('click', () => addUserForm.style.display = 'block');
        btnConfirmAdd.addEventListener('click', addUser);
        btnConfirmUpdate.addEventListener('click', updateUser);
        btnCancelAdd.addEventListener('click', () => addUserForm.style.display = 'none');
        btnCancelUpdate.addEventListener('click', () => updateUserForm.style.display = 'none');
        
        // 显示所有用户
        function showAllUsers() {
            fetch(BASE_URL + '/show')
                .then(response => response.json())
                .then(response => {
                    if (response.success) {
                        displayUsers(response.data);
                    } else {
                        showMessage('获取用户列表失败: ' + response.errorMessage, 'danger');
                    }
                })
                .catch(error => showMessage('获取用户列表失败: ' + error.message, 'danger'));
        }
        
        // 显示男性用户
        function showMaleUsers() {
            fetch(BASE_URL + '/male')
                .then(response => response.json())
                .then(response => {
                    if (response.success) {
                        displayUsers(response.data);
                    } else {
                        showMessage('获取男性用户失败: ' + response.errorMessage, 'danger');
                    }
                })
                .catch(error => showMessage('获取男性用户失败: ' + error.message, 'danger'));
        }
        
        // 显示女性用户
        function showFemaleUsers() {
            fetch(BASE_URL + '/female')
                .then(response => response.json())
                .then(response => {
                    if (response.success) {
                        displayUsers(response.data);
                    } else {
                        showMessage('获取女性用户失败: ' + response.errorMessage, 'danger');
                    }
                })
                .catch(error => showMessage('获取女性用户失败: ' + error.message, 'danger'));
        }
        
        // 根据ID查找用户
        function findUserById() {
            const id = searchId.value;
            if (!id) {
                showMessage('请输入用户ID', 'info');
                return;
            }
            
            fetch(BASE_URL + '/user/' + id)
                .then(response => response.json())
                .then(data => {
                    console.log('DEBUG findUserById response:', data);
                    // 后端返回结构: { data: ..., success: boolean, errorMessage: ... }
                    if (data && data.success) {
                        displayUsers([data.data]);
                    } else {
                        showMessage(data && data.errorMessage ? data.errorMessage : '用户不存在', 'danger');
                    }
                })
                .catch(error => {
                    console.error('ERROR findUserById:', error);
                    showMessage('查找用户失败: ' + error.message, 'danger');
                });
        }
        
        // 添加用户
        function addUser() {
            const username = document.getElementById('newUserName').value;
            const age = document.getElementById('newUserAge').value;
            const gender = document.getElementById('newUserGender').value;
            
            if (!username || !age) {
                showMessage('请填写完整的用户信息', 'info');
                return;
            }
            
            const user = {
                name: username,
                age: parseInt(age),
                gender: gender
            };
            
            fetch(BASE_URL + '/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            })
            .then(response => response.json())
            .then(data => {
                if (data && data.success) {
                    showMessage('添加用户成功', 'success');
                    addUserForm.style.display = 'none';
                    // 清空表单
                    document.getElementById('newUserName').value = '';
                    document.getElementById('newUserAge').value = '';
                    showAllUsers(); // 刷新用户列表
                } else {
                    showMessage(data && data.errorMessage ? data.errorMessage : '添加用户失败', 'danger');
                }
            })
            .catch(error => showMessage('添加用户失败: ' + error.message, 'danger'));
        }
        
        // 更新用户
        function updateUser() {
            const id = document.getElementById('updateUserId').value;
            const username = document.getElementById('updateUserName').value;
            const age = document.getElementById('updateUserAge').value;
            const gender = document.getElementById('updateUserGender').value;
            
            if (!username || !age) {
                showMessage('请填写完整的用户信息', 'info');
                return;
            }
            
            const user = {
                name: username,
                age: parseInt(age),
                gender: gender
            };
            
            fetch(BASE_URL + '/update/' + id, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            })
            .then(response => response.json())
            .then(data => {
                if (data && data.success) {
                    showMessage('更新用户成功', 'success');
                    updateUserForm.style.display = 'none';
                    showAllUsers(); // 刷新用户列表
                } else {
                    showMessage(data && data.errorMessage ? data.errorMessage : '更新用户失败', 'danger');
                }
            })
            .catch(error => showMessage('更新用户失败: ' + error.message, 'danger'));
        }
        
        // 删除用户
        function deleteUser(id) {
            if (confirm('确定要删除这个用户吗？')) {
                fetch(BASE_URL + '/delete/' + id, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data && data.success) {
                        showMessage('删除用户成功', 'success');
                        showAllUsers(); // 刷新用户列表
                    } else {
                        showMessage(data && data.errorMessage ? data.errorMessage : '删除用户失败', 'danger');
                    }
                })
                .catch(error => showMessage('删除用户失败: ' + error.message, 'danger'));
            }
        }
        
        // 编辑用户
        function editUser(user) {
            document.getElementById('updateUserId').value = user.id;
            document.getElementById('updateUserName').value = user.name;
            document.getElementById('updateUserAge').value = user.age;
            document.getElementById('updateUserGender').value = user.gender;
            updateUserForm.style.display = 'block';
        }
        
        // 显示用户列表
        function displayUsers(users) {
            if (!users || users.length === 0) {
                userList.innerHTML = '<p style="text-align: center; color: #666;">暂无用户数据</p>';
                return;
            }
            
            userList.innerHTML = '';
            
            // 确保我们只处理数组数据
            const usersArray = Array.isArray(users) ? users : [users];
            
            usersArray.forEach(user => {
                const card = document.createElement('div');
                card.className = 'user-card';
                
                const genderBadge = user.gender === 'male' ? 
                    '<span class="gender-badge male-badge">男</span>' : 
                    '<span class="gender-badge female-badge">女</span>';
                
                card.innerHTML = `
                    <div class="user-info">
                        <h4>${genderBadge}${user.name}</h4>
                        <p><strong>ID:</strong> ${user.id}</p>
                        <p><strong>年龄:</strong> ${user.age}</p>
                    </div>
                    <div class="user-actions">
                        <button onclick="editUser(${JSON.stringify(user).replace(/"/g, '&quot;')})" class="btn-primary">编辑</button>
                        <button onclick="deleteUser(${user.id})" class="btn-danger">删除</button>
                    </div>
                `;
                
                userList.appendChild(card);
            });
        }
        
        // 显示消息
        function showMessage(text, type = 'info') {
            message.textContent = text;
            message.className = `alert alert-${type}`;
            message.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                message.style.display = 'none';
            }, 3000);
        }
        
        // 将函数暴露到全局作用域，以便在HTML中使用
        window.editUser = editUser;
        window.deleteUser = deleteUser;
        
        // 页面加载时显示所有用户
        window.addEventListener('load', () => {
            btnShowAll.click();
        });
    </script>
</body>
</html>